<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>云主机</title>
    <link rel="bookmark" type="image/x-icon" href="/favicon.ico"/>
    <link rel="shortcut icon" href="/favicon.ico">
    <link href="/css/animate.min.css" rel="stylesheet">
</head>
<body>
<div class="login-layout">
    <div class="login-container">
        <div class="login-inner animated fadeInDown">
            <form action="/ssh/connect" method="post" enctype="application/x-www-form-urlencoded">

                <div class="login-icon"
                     style="transition-delay: 0ms;
                 background-image: url('https://share-10039692.file.myqcloud.com/lab/ac197229e6/logo/cstp8um1v2/Linux.png');">
                </div>
                <h3 class="login-title">Cloud SSH ~</h3>
                <div class="login-item" title="主机IP地址">
                    <label class="login-item-title"><i class="icon"></i></label>
                    <input type="text" placeholder="主机 IP 地址" class="login-item-input" id="hostname" name="hostname"/>
                </div>
                <div class="login-item" title="账号">
                    <label class="login-item-title"><i class="icon"></i></label>
                    <input type="text" placeholder="账号" class="login-item-input" id="username" name="username"/>
                </div>
                <div class="login-item" title="密码">
                    <label class="login-item-title"><i class="icon"></i></label>
                    <input type="password" placeholder="密码" class="login-item-input" id="password" name="password"/>
                </div>
                <div class="login-ft">
                    <button type="submit" class="login-btn block disabled" disabled="disabled" id="connect">
                        <span class="text">连接云主机</span>
                    </button>
                </div>
                <div class="login-title" style="margin-top: 10px;color:red;">
                    <span th:text="${error}"></span>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">

    var hostname;
    var username;
    var password;

    // 登录判断
    $('#password').on('input propertychange', function () {

        hostname = $('#hostname').val();
        username = $('#username').val();
        password = $('#password').val();

        if (hostname != undefined && username != undefined) {
            $('#connect').removeAttr('disabled');
            $('#connect').removeClass('disabled');
        }
        if (password.length == 0) {
            $('#connect').attr('disabled', "disabled");
            $('#connect').addClass('disabled');
        }
    });

</script>
<style type="text/css">
    input {
        text-rendering: auto;
        letter-spacing: normal;
        word-spacing: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        text-align: start;
        font: 400 11px system-ui;
        outline: none;
    }

    .login-layout {
        position: absolute;
        left: 0;
        top: 0px;
        bottom: 0;
        background-color: #272929;
        width: 100%;
    }

    .login-container {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 300;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background-color: #272929;
        color: #fff;
        text-align: center;
        overflow: auto;
    }

    .login-inner {
        position: relative;
        margin-top: 12%;
        display: inline-block;
        vertical-align: middle;
        width: 320px;
    }

    .login-icon {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background-size: cover;
        background-position: center center;
    }

    .login-title {
        margin-bottom: 40px;
        font-size: 16px;
        font-weight: 400;
    }

    .login-item {
        position: relative;
        display: block;
        margin-bottom: 15px;
        height: 38px;
        background-color: #343638;
        border-radius: 2px;
        font-size: 12px;
    }

    .login-item-title {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        box-sizing: border-box;
        padding-left: 10px;
        line-height: 38px;
        color: #000;
        text-align: left;
    }

    .login-item-input {
        display: block;
        box-sizing: border-box;
        padding: 5px 10px;
        width: 100%;
        border: none;
        background-color: transparent;
        line-height: 28px;
        color: #fff;
        -webkit-appearance: none;
    }

    .login-btn {
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;
        padding: 0 20px;
        height: 35px;
        border: 1px solid #00a4ff;
        border-radius: 2px;
        background-color: #00a4ff;
        font-size: 14px;
        line-height: 35px;
        color: #fff;
        text-align: center;
        transition: all .2s;
        position: relative;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .2);
    }

    .login-btn.block {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .login-btn.disabled {
        background-color: #e8e8e8;
        border-color: #e8e8e8;
        color: #888;
        cursor: default;
        box-shadow: none;
    }
</style>
</html>